import React from 'react';
import {View, Dimensions} from "react-native";
import {Path, Circle, G, Text} from 'react-native-svg'
import Svg from "react-native-svg";
import AnimArc from "./AnimArc";

const lineWidth = 10;// 填充线的宽度
const startX = 75; // 中心点X坐标
const space = 14;//两点之间的间隔
const r = 70;//最外层 圆 的半径，包括 填充线
export default class ArcBasic extends React.Component {


  static navigationOptions = ({navigation}) => ({
    title: `Arc - Basic`,
  });

  state = {
    data: [{
      color: '#DC143C',
      theta: 37.5 * 3.6
    }, {
      color: '#CD853F', theta: 80 * 3.6
    }, {
      color: '#00FF7F', theta: 12.5 * 3.6
    },],
    count: 8,
  }

  /**
   * 计算公式
   * x=cx+Rcos(90+θ)  cx 为 原点X坐标
   * y=cy−Rsin(90+θ)  cy 为 原点Y坐标
   * @param startX 圆弧起点
   * @param startY 圆弧起点
   * @param R      圆弧半径
   * @param theta  圆弧终点 与起点 构成的圆心角θ，单位为度
   * @param width  填充宽度
   * @param color  填充颜色
   * @returns {*}
   *  A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
   RX,RY:指所在椭圆的半轴大小
   XROTATION:指椭圆的X轴与水平方向顺时针方向夹角,可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度
   FLAG1:只有两个值，1表示大角度弧线，0为小角度弧线
   FLAG2只有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针
   X,Y为终点坐标
   */
  createArcPath = (startX, startY, R, theta, width, color) => {
    const realR = R - width;
    // const dArr = ["M" + startX, startY + width, "A" + realR, realR, 0, theta >= 180 ? 1 : 0, 0]; //逆时针
    const dArr = ["M" + startX, startY + width, "A" + realR, realR, 0, theta >= 180 ? 1 : 0, 1]; //顺时针
    const cx = startX;
    const cy = startY + R;//确定 中心原点

    const theta2 = theta % 360;
    // 避免360度与0度一样的情况，将圆分成360份
    theta = theta > 0 && theta2 == 0 ? 359.9 : theta2;

    // const alpha = (theta + 90) / 180 * Math.PI;//逆时针
    const alpha = (90 - theta) / 180 * Math.PI;//顺时针
    const dx = realR * Math.cos(alpha);
    const dy = realR * Math.sin(alpha);

    const x = cx + dx;  //终点坐标
    const y = cy - dy;  //终点坐标

    dArr.push(x.toFixed(2));
    dArr.push(y.toFixed(2));
    const d = dArr.join(" ");

    const circleR = lineWidth / 2;
    const circleStartY = startY + lineWidth;

    return (
      <AnimArc
        x={x}
        y={y}
        d={d}
        color={color}
        width={width}
        startX={startX}
        circleStartY={circleStartY}
        circleR={circleR}
      />
    );
  }

  _renderBackgrond = () => {
    return this.state.data.map((item, i) => {
      const startY = i * space;
      const R = r - startY;
      return this.createArcPath(startX, startY, R, 360, lineWidth, '#F5F5F5');
    })
  }
  _renderData = () => {
    return this.state.data.map((item, i) => {
      const startY = i * space;
      const R = r - startY;
      const theta = item.theta;
      return this.createArcPath(startX, startY, R, theta, lineWidth, item.color);
    })
  }

  _renderText = () => {
    const fontSize = 14;
    return (
      <Text
        x={startX}
        y={r + fontSize / 2}
        fill='#000'
        fontSize={fontSize}
        textAnchor="middle"
      >{this.state.count + '台'}</Text>
    )
  }


  render() {

    return (
      <View style={{flex: 1, backgroundColor: '#fff'}}>
        <Svg width={375} height={618}>
          {this._renderBackgrond()}
          {this._renderData()}
          {this._renderText()}
        </Svg>
      </View>
    )
  }
}
